
require(['./config'], () => {
    require(['template', 'request', 'footer', 'header', 'right_border'], (template, request) => {
        class Rim_list {
                constructor() {
                    this.$rim_type = $('#rim_type')
                    this.init()
                    
                }

                
                //初始化
                init() {
                    const id = window.location.hash.slice(1,2)
                    const start = window.location.hash.slice(9, window.location.hash.indexOf('&'))
                    const sort = window.location.hash.slice(window.location.hash.indexOf('&') + 6)
                    this.init_type()
                    this.rim_listrender(id, start, sort)
                    
                }

                // 给所有翻页按钮绑定点击事件
                Aonclick(page) {
                    const _this = this
                    $('a').filter((index) => {
                        if($('a').eq(index).attr('target') === '_self') {
                            return true
                        }
                    }).on('click', function() {
                        const http = $(this).attr('href')
                        const id = http.slice(parseInt(http.indexOf('#')) + 1, http.indexOf('?'))
                        const start = http.slice(http.indexOf('start=') + 6, http.indexOf('&'))
                        const sort = http.slice(http.indexOf('&')+6)
                        // _this.rim_listrender(id, start)
                        // location.url() = 'http://localhost:1908'+ http
                        // location.reload();
                        _this.rim_listrender(id, start, sort)
                        
                    })
                }

                //初始化分页按钮
                init_page(id, _start, sort) {
                    // if(window.location.hash == '#1') {
                    //     var id = 1
                    //     var _start = 0
                    // } else {
                    //     var id = window.location.hash.slice(1,2)
                    //     var _start = window.location.hash.slice(9)
                    // }
                    const page = _start / 20 + 1
                    $('#page_num').html(`共110个商品 ${page}/5页`)
                    if(page == 5) {
                        $('.btn-next').addClass('not_click')
                    }
                    else if(page == 1) {
                        $('.btn-prev').addClass('not_click')
                    } else {
                        
                    }
                    $.each($('.page').children('a'), (index) => {
                        if(index === page) {
                            $('.page').children('a').eq(index).addClass('ac')
                        } else {
                            $('.page').children('a').eq(index).removeClass('ac')
                        }  
                    })
                    var next = Number(_start) + 20 > 80 ? Number(_start) : (Number(_start) + 20)
                    var prev = (Number(_start) - 20) >= 0 ? (Number(_start) - 20) : 0
                    $.each($('.btn-next'), (index, item) => {
                        $('.btn-next').eq(index).attr( 'href', `/html/rim_list.html#${id}?start=${next}&sort=${sort}` )
                    })
                    $.each($('.btn-prev'), (index, item) => {
                        $('.btn-prev').eq(index).attr( 'href', `/html/rim_list.html#${id}?start=${prev}&sort=${sort}` )
                    })
                    $.each($('#pagenum').children('a').slice(1, 6), (index, item ) => {
                        $('#pagenum').children('a').slice(1, 6).eq(index).attr('href', `/html/rim_list.html#${id}?start=${index * 20}&sort=${sort}`)
                    }) 
                    //绑定上下页
                    // this.next(page)
                    // this.prev(page)
                }
                
                //初始化排序按钮
                init_sort(id, sort) {
                    let $sortbtn = $('#sort').children('a')
                    $.each($sortbtn, index => {
                        $sortbtn.eq(index).removeClass('ac')
                        if(sort == index) {
                            $sortbtn.eq(index).addClass('ac')
                        }
                        $sortbtn.eq(index).attr('href', `/html/rim_list.html#${id}?start=0&sort=${index}`)
                    })
                }
            //渲染所有商品
            rim_listrender(id, start, sort) {
                //根绝id请求当前分类的数据
                request.list_get(id, start, sort).then(resp => {
                    if(resp.code === 200) {
                        const { list } = resp.data.items
                        console.log(resp)
                        $('#rim_list_com').html(template('rim_listrender', { list }))
                    }
                })
                this.init_page(id, start, sort)
                this.init_sort(id, sort)
            }
            

            //自动生成分类栏
            init_type() {
                new Promise( resolve => {
                    $.get('/libs/json/class_id.json', resp => {
                        resp.forEach((item, index) => {
                            var _index = index
                            item.forEach((item, index) => {
                                if(index === 0) {
                                    $('<span>').append($(`<a target="_blank">`).attr({ href: `/html/rim_list.html#${item.id}?start=0` }).html(`${item.title}`)).appendTo(this.$rim_type).append($('<div class=list_ziji>').append($('<a>').append($('<b>').html('全部'))))
                                }
                                else {
                                    this.$list_ziji = this.$rim_type.find('.list_ziji').eq(_index)
                                    $('<a target="_self">').attr({ href: `/html/rim_list.html#${item.id}?start=0&sort=0` }).html(`${item.title}`).appendTo(this.$list_ziji)
                                }
                            })
                        })
                        resolve()
                    })
                }).then(() => {
                    const id = window.location.hash.slice(1,2)
                    let _start = window.location.hash.slice(9)
                    const page = _start / 20 + 1
                    this.class_hover()
                    this.Aonclick(page)
                })
            }


            // // 分类框绑定点击事件
            // class_list() {
            //     this.$rim_type.on('click', (e) => {
            //         e = e || event
            //         if(e.target.nodeName === 'A') {
            //             $.get('/libs/json/class_id.json', resp => {
            //                 var type = e.target.innerHTML
            //                 resp.forEach((item, index) => {
            //                     item.forEach((item, index) => {
            //                         if(item.title === type) {
            //                             this.rim_listrender(item.src)
            //                         }
            //                     })
            //                 })
            //             })
            //         }
                    
            //     })
            // }

            //分类框绑定移入移除事件
            class_hover() {
                this.$rim_type.children('span').hover(function()  {
                    var _this = this
                    new Promise( (resolve) => {
                        $('#rim_type').find('.list_ziji').removeClass('ac')
                        resolve()
                    }).then( () => {
                        $(_this).children('.list_ziji').addClass('ac')
                    })
                    
                }, () => {

                })
            }

            // //下一页
            // next(page) {
            //     $('#page_next').on('click', function() {
            //         page++
            //         $('.page').children('a').removeClass('ac').eq(page).addClass('ac')
            //     })
            // }

            // //上一页
            // prev(page) {
            //     $('#page_prev').on('click', function() {
            //         page--
            //         if(page < 0) page = 0
            //         $('.page').children('a').removeClass('ac').eq(page).addClass('ac')
            //     })
            // }

        }

        
        new Rim_list()
    })
})